<template>
  <div class="table-int">
    <nav-title @goMore="goMore" v-if="more"></nav-title>
    <!-- 头部 -->
    <table class="table">
      <colgroup>
        <col :style="{ width: item.width || 'auto' }" v-for="(item, index) in columns" :key="index" />
      </colgroup>
      <thead class="header">
        <tr>
          <th class="td" :style="{ width: item.width || 'auto' }" v-for="item in columns" :key="item.key">
            <toolTip :text="item.title" />
          </th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr class="th" v-for="(item, index) in data" :key="index">
          <td class="td" v-for="(itemt, indext) in columns" :key="indext" :data-row-key="index">
            <em v-if="itemt.dataIndex == 'key'">{{ index + 1 }}</em>
            <em v-else-if="!itemt.scopedSlots"><toolTip :text="item[itemt.key]" /></em>
            <slot v-else :name="itemt.scopedSlots.customRender" :text="{ ...item }"></slot>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="no-data" v-if="data.length == 0">暂无数据</div>
    <div class="footer">
      <div>
        <div class="total" v-if="hide">
          总数:<em>{{ pagination.total }}</em>
        </div>
      </div>
      <div class="page">
        <a-icon :class="['icon', pagination.pageIndex == 1 ? 'disabled' : '']" type="left" @click="prev" /><input
          class="page-no"
          type="text"
          @change="changePageNo($event)"
          :value="pagination.pageIndex"
        /><em>/</em><em>{{ pages }}</em
        ><a-icon
          :class="['icon', pagination.pageIndex == pages || pagination.pageIndex >= pages ? 'disabled' : '']"
          type="right"
          @click="next"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import navTitle from '../navTitle'
  import toolTip from '@comp/gis/toolTip'

  export default {
  props: {
    data: {
      type: Array,
      default: [],
    },
    columns: {
      type: Array,
      default: [],
    },
    pagination: {
      type: Object,
      default: {},
    },
    hide: {
      type: Boolean,
      default: true,
    },
    more: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    navTitle,
    toolTip,
  },
  computed: {
    pages() {
      return Math.ceil(this.pagination.total / this.pagination.pageSize)
    },
  },
  methods: {
    goMore() {
      this.$emit('goMore');
    },
    //上一页
    prev() {
      if (this.pagination.pageIndex <= 1) return
      console.log("上一页====",this.pagination.pageIndex);
      const _pageNo = this.pagination.pageIndex - 1
      this.$emit('change', _pageNo)
    },
    //下一页
    next() {
      if (this.pagination.pageIndex >= this.pages) return
      console.log("上一页====",this.pagination.pageIndex);
      const _pageNo = this.pagination.pageIndex + 1
      this.$emit('change', _pageNo)
    },
    //改变分页
    changePageNo(event) {
      const _pageNo = event.target.value
      if(_pageNo<=0) {
        this.$emit('change', 1)
      } else {
        this.$emit('change', _pageNo)
      }
      
    },
  },
}
</script>
<style lang="less" scoped>
.table-int {
  width: auto;
  height: auto;
  .table {
    width: 100%;
    min-width: 100%;
    height: auto;
    table-layout: fixed;
    .header {
      width: 100%;
      height: 27px;
      background: rgba(0, 0, 0, 0.5);
      .td {
        font-weight: 400;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
        padding: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .tbody {
      width: 100%;
      height: auto;
      background: rgba(19, 40, 56, 0.5);
      height: auto;
      .th {
        height: auto;
        padding: 2px 5px;
        border-bottom: 1px solid rgba(25, 144, 253, 0.35);
        position: relative;
        .td {
          font-weight: 400;
          color: rgba(255, 255, 255, 0.65);
          padding: 5px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .th:last-child {
        border: none;
      }
    }
  }
  .no-data {
    width: 100%;
    text-align: center;
    color: #ffffff;
    padding: 10px 0;
  }
  .footer {
    margin-top: 15px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .total {
      display: flex;
      align-items: center;
      color: #ffffff;
      font-weight: 400;
      font-family: PingFangSC-Regular, PingFang SC;
      em {
        margin-left: 10px;
      }
    }
    .page {
      display: flex;
      align-items: center;
      .icon {
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;
      }
      .disabled {
        cursor: not-allowed;
        color: rgba(255, 255, 255, 0.3);
      }
      .page-no {
        width: 48px;
        height: 22px;
        margin: 0 16px;
        background: transparent;
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        text-align: center;
      }
      em {
        color: rgba(255, 255, 255, 0.65);
        margin-right: 13px;
      }
    }
  }
}
</style>